<html>
	<head>
		<link href="app://css/reset.css" rel="stylesheet" />
		<link href="app://css/pepper-grinder/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="/js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
		<script type="text/javascript" src="/js/sagabuilder.js"></script>
		<script type="text/javascript" src="/js/data.js"></script>
		<link rel="stylesheet" href="app://css/sagabuilder.css"/>
	</head>
	<body >
		<div class="panels">
			<div id='startup' class="panel">
				<div class="centered">
					<div class="centered-vertical">
						<h1>SagaBuilder</h1>
						<ul>
							<li><a id='newgame' class="option" href="#stage">New Game</a></li>
							<li><a id='continue' class="option" href="#continue">Continue</a></li>
							<li><a id='instructions' class="option" href="#instructions">Instructions</a></li>
							<li><a id='showcredits' class="option" href="#credits">Credits</a></li>
							<li><a id='editor' class="option" href="#leveled">Editor</a></li>
							<li><a id='testui' class="option" href="#testing">Testing</a></li>
							<li><a id='testdialog' class="option" href="#dialog">Dialog</a></li>
							<li><a id='introscreen' class="option" href="#intro">Intro</a></li>
						</ul>
					</div>
				</div>

			</div>
			<div id="stage" class="panel hidden">
			
			</div>	
			
			<div id='testing' class="panel hidden">
				<!-- test the UI for the game -->
				<ul id="story-elements">
					<li>element</li>
				</ul>
				
				<div id="scenes">
					<ul>
						<li><a href="#tabs-1">Storyline</a></li>
						<li><a href="#tabs-2">Scenes</a></li>
					</ul>
					<div id="tabs-1">
						<ul class="storyline">
								<li>intro</li>
						</ul>
					</div>	
					<div id="tabs-2">
						scenes
						<div class="drp">[drop here]</div>
					</div>
				</div>
				
				
					
			</div>
			
			
			<div id='instructions' class="panel hidden">
				
			</div>
			<div id='credits' class="panel hidden">
				Created by Andrew Wooldridge
			</div>
			<div id='dialog' class="panel hidden">
				<div class="dialogwrapper">
					<div class="bgd landscape">
						
					</div>
					<div class="fgd">
						<div class="masker top"></div>
						<div class="masker bottom"></div>
						<div class="dialogmsg">
							<p>The forest stretches out before you, inviting you to explore.</p>
						</div>
					</div>
				</div>
			</div>
			
			<div id='intro' class="panel hidden">
				<p>Once upon a time...</p>
			</div>
			
		</div>
	</body>
</html>